<template>
	<scroll-view :scroll-y="true" :style="style" :refresher-enabled="pull" :refresher-threshold=" 75 "
		refresher-default-style="none" refresher-background="#F5F5F5" @refresherpulling="onPulling"
		@refresherrefresh="onRefreshing" :refresher-triggered="triggered">
		<view style="height:1px;"></view>
		<view slot="refresher" class="hxt-flex"
			style="width:100%; height:75px; box-sizing: border-box;text-align: center; background-color:#F5F5F5; font-weight: bold;">
			<view class="hxt-flex-fill"></view>
			<text id="pushIco" :class="['cuIcon-'+(pushLoading==2?'loading':'refresharrow'), 'text-cyan']"
				style="display: block; font-size:38rpx;"
				:style="pushLoading==0?'':pushLoading==1?'transform:rotate(180deg);':'animation: cuIcon-spin 2s infinite linear;'"></text>
			<text class="text-cyan">{{pushLoading==0?'下拉':pushLoading==1?'释放':'正在'}}刷新</text>
			<view class="hxt-flex-fill"></view>
		</view>
		<slot></slot>
		<view style="padding-bottom:30rpx;">
			<button v-if="hasMore&&!!moreText" :disabled="moreLoading" class="cu-btn line-cyan round shadow block"
				style="width: auto; margin:20rpx 32rpx;" @click="onLoadMore">
				<text v-if="moreLoading"
					class="cuIcon-loading iconfont-spin text-cyan"></text>{{moreLoading?'正在加载...':moreText}}
			</button>
			<view v-if="!hasMore&&!!nomoreText" class="hxt-line">{{nomoreText}}</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		name: "hxt-scroll",
		options: {
			styleIsolation: 'apply-shared'
		},
		props: {
			style: {
				type: String,
				default: ''
			},
			moreText: {
				type: String,
				default: '加载更多'
			},
			nomoreText: {
				type: String,
				default: '没有更多信息了'
			},
			pull: { //是否可以下拉
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				pushLoading: 0, // 0：正在下拉 1：下拉到可刷新；2：刷新
				triggered: false,
				hasMore: false,
				moreLoading: false
			};
		},
		methods: {
			onPulling: function(evt, instance) {
				var p = Math.min(evt.detail.dy / 75, 1);
				// var view = instance.selectComponent('#pushIco'); //可获取对象
				// view.setStyle({//可设置样式
				// 	transform: 'rotate(' + (180 * p) + 'deg)'
				// });
				this.setData({
					pushLoading: p < 1 ? 0 : 1
				});
			},
			onRefreshing: function() {
				var _this = this;
				wx.showNavigationBarLoading();
				this.setData({
					pushLoading: 2,
					triggered: true
				});
				this.$emit('loadData', {
					refresh: true
				});
			},
			refreshDone: function(hasmore) {
				wx.hideNavigationBarLoading();
				this.setData({
					pushLoading: 0,
					triggered: false,
					hasMore: hasmore,
					moreLoading: false
				});
			},
			onLoadMore: function() {
				wx.showNavigationBarLoading();
				this.setData({
					moreLoading: true
				});
				this.$emit('loadData', {
					refresh: false
				});
			},
			stopMove: function() {
				return false;
			}
		}
	}
</script>

<style>

</style>
